<script setup>
// expects props options
const props = defineProps({
	item: {
		type: Object,
		default: () => {
			return {
				id: '',
				url: '',
				quantity: 0,
				title: '',
				link: '',
				sku: '',
				etcList: [],
			};
		},
	},
	// 货币单位
	currencySymbol: {
		type: String,
		default: () => {
			return '';
		},
	},
});
</script>

<template>
	<div class="product-box">
		<div class="product-left">
			<div class="product-img">
				<el-image :lazy="true" :src="item.url" fit="cover"></el-image>
			</div>
			<div class="product-length">{{ item.quantity }}</div>
		</div>
		<div class="product-right">
			<div class="product-name">
				<el-link type="primary" :href="item.link" target="_blank">{{ item.title }}</el-link>
			</div>
			<div class="product-sku">SKU:{{ item.sku }}</div>
			<div class="product-etc-dl">
				<div v-for="(item, index) in item.etcList" v-show="item.act.id !== 0" :key="`product-etc-dd-${item.id}-${index}`" class="product-etc-dd">
					{{ item.etcLabel }} by {{ item.act.name }} - {{ currencySymbol }}{{ item.act.price }}
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.product-box {
	display: flex;
	align-items: center;
	padding: 10px 0;
	.product-left {
		width: 100px;
		margin-right: 20px;
		position: relative;
		.product-img {
			width: 100px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eeeeee;
			overflow: hidden;
			img {
				width: 100%;
				height: auto;
			}
		}
		.product-length {
			position: absolute;
			z-index: 5;
			right: -10px;
			top: -5px;
			font-size: 14px;
			background: #cccccc;
			height: 30px;
			width: 30px;
			border-radius: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.product-right {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		text-align: left;
		.product-name {
			font-size: 14px;
		}
		.product-sku {
			font-size: 14px;
		}
		.product-etc-dl {
			.product-etc-dd {
				color: red;
			}
		}
	}
}
</style>
